<template>
  <div class="business-root">
    <div class="white-card zjxzl">
      <GdwyyAppBigTitle
        :title="`${pageTitle}总览`"
        :time="queryParam.dayId"
        style="margin-bottom: 6.4vw"
      ></GdwyyAppBigTitle>
      <van-loading v-if="loading" type="spinner" color="#1989fa" />
      <template v-else>
        <GdwyyAppSmallTitle v-if="showJf" title="发展"></GdwyyAppSmallTitle>
        <!-- 以2为分组 -->
        <van-swipe :loop="true" width="100%" :touchable="true" :autoplay="5000" style="padding: 0 10px">
          <!-- <van-swipe-item v-for="(item, idx) in dataConfig" class="card" :key="idx">
          <div class="flex center">
            <img class="icon-" :src="require(`../../../../../../assets/imgs/reconsitution/${item.icon}.png`)" />
            <div class="title- bold" style="line-height: 5.6vw; margin-left: 1.3333vw">{{ item.title }}</div>
          </div>
          <div class="k- k-top center">当日值/目标值</div>
          <div class="v- center flex">
            <span>100/2</span>
            <span class="unit">户</span>
          </div>
          <template v-for="(ite, idx) in item.list">
            <div :key="idx + 'dr'" class="flex flex-between" style="margin-top: 3.7333vw">
              <div class="flex flex-between">
                <img class="icon-" :src="require(`../../../../../../assets/imgs/reconsitution/${ite.icon}.png`)" />
                <div class="k-">{{ ite.label }}</div>
              </div>
              <div class="color333">12/0</div>
            </div>
          </template>
        </van-swipe-item> -->
          <van-swipe-item v-if="!isBq">
            <div class="fill-w flex-center" style="column-gap: 4.6vw">
              <div v-for="(item, idx) in showDataConfig[0]" class="card" style="flex-direction: column; display: flex">
                <div class="flex center" :key="idx">
                  <img
                    class="icon-"
                    :src="require(`../../../../../../../assets/imgs/reconsitution/${item.icon}.png`)"
                  />
                  <div class="title- bold" style="line-height: 5.6vw; margin-left: 1.3333vw">{{ item.title }}</div>
                </div>
                <div class="k- k-top center">当日值/目标值</div>
                <div class="v- center flex">
                  <span
                    :class="{ 'num-underline': Number(data[dataModel[item.model]]) > 0 }"
                    @click="handleopenDialog({ ...item, num: data[dataModel[item.model]] })"
                    >{{ data[dataModel[item.model]] }}</span
                  >
                  <span class="unit">户</span>
                </div>
                <div style="display: flex; flex-direction: column; flex: 1; justify-content: end">
                  <template v-for="(ite, idx) in item.list">
                    <div :key="idx + 'dr'" class="flex flex-between" style="margin-top: 2.1333vw">
                      <div class="flex flex-between">
                        <img
                          class="icon-"
                          :src="require(`../../../../../../../assets/imgs/reconsitution/${ite.icon}.png`)"
                        />
                        <div class="k- font-12">{{ ite.label }}</div>
                      </div>
                      <div
                        class="color333 font-12"
                        :class="{ 'num-underline': Number(data[dataModel[ite.model]]) > 0 }"
                        @click="handleopenDialog({ ...ite, num: data[dataModel[ite.model]] })"
                      >
                        {{ data[dataModel[ite.model]] || 0 }}/{{ data[dataModel[ite.mbModel]] || 0 }}
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="fill-w flex-center" style="column-gap: 4.6vw">
              <div
                v-for="(item, idx) in showDataConfig[1]"
                class="card"
                style="flex-direction: column; display: flex"
                :class="{ 'mg-r': idx === 0 }"
              >
                <div class="flex center" :key="idx">
                  <img
                    class="icon-"
                    :src="require(`../../../../../../../assets/imgs/reconsitution/${item.icon}.png`)"
                  />
                  <div class="title- bold" style="line-height: 5.6vw; margin-left: 1.3333vw">{{ item.title }}</div>
                </div>
                <div class="k- k-top center">当日值/目标值</div>
                <div class="v- center flex">
                  <span
                    :class="{ 'num-underline': Number(data[dataModel[item.model]]) > 0 }"
                    @click="handleopenDialog({ ...item, num: data[dataModel[item.model]] })"
                    >{{ data[dataModel[item.model]] }}</span
                  >
                  <span class="unit">户</span>
                </div>
                <div :class="`item-list type${item.list.length === 4 ? 4 : 1}`">
                  <template v-for="(ite, idx) in item.list">
                    <div :key="idx + 'dr'" class="item">
                      <div class="flex">
                        <img
                          class="icon-"
                          :src="require(`../../../../../../../assets/imgs/reconsitution/${ite.icon}.png`)"
                        />
                        <div class="k- font-12">{{ ite.label }}</div>
                      </div>
                      <div
                        class="color333 vv- font-12"
                        :class="{ 'num-underline': Number(data[dataModel[item.model]]) > 0 }"
                        @click="handleopenDialog({ ...item, num: data[dataModel[item.model]] })"
                      >
                        {{ data[dataModel[ite.model]] || 0 }}/{{ data[dataModel[ite.mbModel]] || 0 }}
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>

        <template v-if="showJf">
          <GdwyyAppSmallTitle title="交付"></GdwyyAppSmallTitle>
          <div v-for="(item, index) in jfListConfig" :key="index + 'jfg'" :class="`jf-card jf-card${index}`">
            <div v-for="(ite, ind) in item.list" :key="ind + 'ite'">
              <div class="k-">{{ ite.label }}</div>
              <div
                class="v-"
                :class="{ 'num-underline': Number(jfData[dataModel[ite.model]]) > 0 }"
                @click="handleopenDialog({ ...ite, num: jfData[dataModel[ite.model]] }, 'jf')"
              >
                {{ jfData[dataModel[ite.model]] || 0 }}
              </div>
            </div>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import { GdwyyAppBigTitle, GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { jfListConfig, _ywsjListV2, _kdListV2, _zjcpIPTVListV2, _lchCallbackData } from '../../common'
import { sql2apiAction } from '@/api/manage'

const urlMap = {
  morning: {
    zjx_jf: '2c3a07178ba92724018bb9eab5bc0006',
    bq_jf: '2c3a07178ba92724018bff1f5a1a0025',
  },
  evening: {
    zjx_jf: '2c3a07178ba92724018bc78b84db000c',
    bq_jf: '2c3a07178ba92724018bff0eacc10021',
  },
}
export default {
  name: 'GdwyyAppFz',
  components: {
    GdwyyAppBigTitle,
    GdwyyAppSmallTitle,
  },
  props: {
    showJf: {
      type: Boolean,
      default: true,
    },
    pageTitle: {
      type: String,
      default: '',
    },
    pageType: {
      type: String,
      default: 'morning',
    },
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    dataModel: {
      type: Object,
      default: () => {
        return {}
      },
    },
    queryParam: {
      type: Object,
      default: () => {
        return {}
      },
    },
    loading: {
      type: Boolean,
      default: true,
    },
    isBq: Boolean,
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      jfListConfig,
      jfData: {},
    }
  },
  computed: {
    dataConfig() {
      return [
        {
          title: '移网手机',
          model: 'ywsjtotal',
          icon: 'yyxzl_ywsj',
          kpiCode: 'YW_0008',
          list: this.getListIcon(_ywsjListV2, ['ywsj_ywzk', 'ywsj_5gzk', 'ywsj_fk']),
        },
        {
          title: '宽带',
          model: 'kdtotal',
          icon: 'yyxzl_kd',
          list: this.getListIcon(_kdListV2, ['kd_kd', 'kd_zqz']),
          kpiCode: 'KD_0008',
        },
        {
          title: '智家产品',
          model: 'zjcptotal',
          icon: 'yyxzl_zjcp',
          list: this.getListIcon(_zjcpIPTVListV2, ['zjcp_wjsy', 'zjcp_wjzw', 'zjcp_iptv', 'zjcp_fttr']),
          kpiCode: 'ZJ_0001',
        },
      ]
    },

    showDataConfig() {
      return [
        [this.dataConfig[0], this.dataConfig[1]],
        [this.dataConfig[1], this.dataConfig[2]],
      ]
    },
  },
  mounted() {
    this.loadJfData()
  },

  methods: {
    getListIcon(data, iconList = [], targetModel = '') {
      return data.map((item, index) => {
        const obj = {
          ...item,
          icon: iconList[index],
        }
        targetModel && (obj.model = targetModel + item.model)
        return obj
      })
    },
    loadJfData() {
      let url = urlMap[this.pageType][this.type + '_jf']
      sql2apiAction(url, this.queryParam).then((res) => {
        const data = res.result
        this.jfData = data[0] || {}
      })
    },
    handleopenDialog(item, panelType = 'fz') {
      let params = {
        kpiCode: item.kpiCode,
      }
      this.isBq &&
        (params = {
          ...params,
          bqName: this.$route.query.pageTitle,
          bqId: JSON.parse(this.$route.query.queryParam).bqId,
        })
      this.$emit('openDialog', {
        num: item.num,
        panelType,
        params,
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.num-underline {
  text-decoration: underline;
}
.mg-r {
  margin-right: 10p;
}
.flex {
  display: flex;
  align-items: center;
}

.flex-between {
  justify-content: space-between;
}

.center {
  justify-content: center;
  text-align: center;
  align-items: center;
}

.bold {
  font-weight: bold;
}

.business-root {
  padding: 0 2.1333vw;

  .white-card {
    background-color: #fff;
    border-radius: 1.6vw;
    padding: 3.2vw 2.1333vw;
  }

  .zjxzl {
    margin: 0 0 4.5333vw;
    /* margin: 0 4.5333vw 5.3333vw 4.5333vw; */
    position: relative;

    ::v-deep {
      /* .van-swipe__track {
        column-gap: 2.6667vw;
      } */

      .van-swipe__indicators {
        position: unset;
        transform: unset;
        column-gap: 4.2667vw;
        justify-content: center;
        margin-top: 3.2vw;
      }

      .van-swipe__indicator {
        width: 1.0667vw;
        height: 1.0667vw;
        background: #d8d8d8;
        opacity: 1;
        border-radius: 0.2667vw;
        margin-right: translateX(0);
      }

      .van-swipe__indicator--active {
        background: #4d98ff;
        /* border-radius: 0.2667vw; */
        width: 4.2667vw;
        height: 1.0667vw;
        border-radius: 0.2667vw;
      }
    }

    .icon-top {
      width: 5.3333vw;
      height: 5.3333vw;
    }

    .title-h1 {
      font-size: 4.8vw;
      color: #333333;
      letter-spacing: -0.056vw;
      font-weight: bolder;
      padding-left: 1.6vw;
      line-height: 6.6667vw;
    }

    .time-grey {
      font-size: 3.7333vw;
      color: #999999;
    }

    .title-zj {
      margin-bottom: 3.4667vw;
      line-height: 5.8667vw;

      .grey {
        font-size: 3.2vw;
        color: #999999;
      }

      .text {
        position: relative;
        padding-left: 2.4vw;
        font-size: 4.2667vw;
        color: #000000;

        &::before {
          position: absolute;
          content: '';
          width: 1.0667vw;
          height: 4.8vw;
          background: #4d98ff;
          border-radius: 0.5333vw;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
    }

    .title-jf {
      margin-top: 3.2vw;
      padding-top: 3.2vw;
      border-top: 0.2667vw dashed rgba(77, 152, 255, 0.4);
    }

    .jf-card {
      padding: 2.6667vw 2.6667vw 2.1333vw 13.3333vw;
      background-size: 100% 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      .k- {
        font-size: 3.4667vw;
        color: #333333;
        letter-spacing: -0.04vw;
        line-height: 4.8vw;
        margin-bottom: 1.6vw;
        position: relative;
        padding-left: 2.6667vw;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1.6vw;
          height: 1.6vw;
        }
      }

      .v- {
        line-height: 7.4667vw;
        font-size: 5.3333vw;
        letter-spacing: -0.0613vw;
        padding-left: 2.6667vw;
      }
    }

    .jf-card0 {
      background-image: url('~@assets/imgs/wisdomLine/jf_zj.png');

      color: #41c2bf;

      .k-::before {
        background: rgba(65, 194, 191, 0.3);
      }
    }

    .jf-card1 {
      background-image: url('~@assets/imgs/wisdomLine/jf_yj.png');
      margin: 3.2vw 0;

      color: #fd806e;

      .k-::before {
        background: rgba(253, 128, 110, 0.3);
      }
    }

    .jf-card2 {
      background-image: url('~@assets/imgs/wisdomLine/jf_xj.png');
      color: #ffab4d;

      .k-::before {
        background: rgba(255, 171, 77, 0.3);
      }
    }

    .card {
      line-height: 4.5333vw;
      padding: 2.1333vw 1.6vw 1.6vw;
      background-image: url('~@assets/imgs/businessLine/yyxzl_card.png');
      background-size: 100% 100%;
      width: 40.5333vw;
      height: 48vw;
      .title- {
        font-size: 4vw;
        color: #333333;
        letter-spacing: -0.0453vw;
        font-weight: bold;
      }

      .item-list {
        flex: 1;
        &.type1 {
          display: flex;
          flex-direction: column;
          justify-content: end;
          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 3.7333vw;
          }
        }
        &.type4 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          align-items: end;
          .vv- {
            padding-left: 4.2667vw;
          }
        }
      }

      .k- {
        color: #999999;
      }

      .k-top {
        margin: 1.6vw 0 0.8vw;
      }

      .unit {
        font-size: 3.7333vw;
        align-self: flex-end;
        line-height: 5.3333vw;
      }

      .v- {
        line-height: 8.8vw;
        font-size: 6.4vw;
        color: #4d98ff;
        letter-spacing: -0.0747vw;
        margin-bottom: 2.1333vw;
      }

      .icon- {
        width: 3.7333vw;
        height: 3.7333vw;
        margin-right: 0.5333vw;
      }
    }
  }
}
@import '~@assets/less/reconsitution/common.less';
</style>